import React, { useCallback, useState } from "react";
import { SchemaFieldProvider } from "../core/SchemaField";
import SortableDecorator from "./DesignDecorator";
import { Button, Table } from "antd";
import Grid from "../material/Grid";
import {
  closestCenter,
  DndContext,
  KeyboardSensor,
  MouseSensor,
  PointerSensor,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
import { cloneDeep, uniqueId, updatePrimaryKey } from "../shared";
import "./index.less";
import GridSetter from "../material/Grid/Setter";
import ButtonSetter from "../material/Button/Setter";
import LowTableSetter from "../material/Table/Setter";
import LowTable from "../material/Table";
import Container from "../material/Container";
import PageContainer from "../material/PageContainer";
import LowTabs from "../material/Tabs";
import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

export const DesignFrameworkContext = React.createContext<any>({
  components: {},
  setters: {},
  Decorator: null,
});

export const DesignFrameworkProvider = ({ children }) => {
  const [items, setItems] = useState<any>({
    label: "页面",
    _id: uniqueId(),
    isPageContainer: true,
    isContainer: true,
    properties: {
      "x-component": "PageContainer",
      "x-component-props": {
        items: []
      },
    },
  });
  const [currentDesign, setCurrentDesign] = useState<any>({});

 

  return (
    <DndProvider backend={HTML5Backend}>
      <DesignFrameworkContext.Provider
        value={{
          setters: {
            GridSetter,
            LowTableSetter,
            ButtonSetter,
          },
          currentDesign,
          setCurrentDesign,
        }}
      >
        <SchemaFieldProvider
          Decorator={SortableDecorator}
          items={items}
          setItems={setItems}
          components={{
            Button,
            PageContainer,
            Container,
            LowTable,
            LowTabs,
            Grid,
          }}
        >
          {children}
        </SchemaFieldProvider>
      </DesignFrameworkContext.Provider>
    </DndProvider>
  );
};
